<template>
  <div>
    <ul>
      <li ref="liref" v-for="(item, index) in users" :key="item.id">
        <span>{{ item.name }}</span>
        <span @click="del(index)">删除</span>
      </li>
    </ul>

    <button @click="getLi">获取h3的dom对象</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '赵六' }
      ]
    }
  },
  mounted() {},
  updated() {
    // console.log(this.$refs.liref)
  },
  methods: {
    getLi() {
      console.log(this.$refs.liref)
    },
    del(index) {
      /// vue视图渲染是比较耗时间的，所以它是一个异步操作
      // refs获取它是一个同步的操作，所以在进行数据删除或添加操作时，得到的dom就可能不对了
      console.log(this.$refs.liref)
      this.users.splice(index, 1)
      // vue知道可能存在这样的需求，数据操作完毕后要执行的一次额外操作
      // 在下次 DOM 更新循环结束之后执行延迟回调
      // 把同步代码变成异步，关且给添加到了渲染异步队列的最后一位
      // 异步：异步宏任务队列，微任务
      // 它会自动来判断，浏览器是否支持微任务，只有不支持的情况才选用异步宏任务
      this.$nextTick(() => {
        console.log('nextTick',this.$refs.liref)
      })
    }
  }
}
</script>

<style lang="scss"></style>
